<template>
  <div class="rate-wrap">
    ☆☆☆☆☆
    <span :style="style">★★★★★</span>
  </div>
</template>
<script>
export default {
  props: {
    value: {type: [Number, String], default: 0}
  },
  computed: {
    style () {
      return `width:${this.value * 100 / 10}%`
    }
  }
}
</script>
<style lang="scss" scoped>
.rate-wrap{
  position: relative;
  display: inline-block;
  span{
    position: absolute;
    top: 0;
    left: 0;
    widows: 0;
    overflow: hidden;
  }
}
</style>
